<!--添加角色的组件 通过 父组件传值过来-->
<template>
  <el-button text @click="props.ComplieRoleData.dialogVisible = true">

  </el-button>

  <el-dialog
      v-model="props.ComplieRoleData.dialogVisible"
      title="角色管理"
      width="30%"
      :before-close="handleClose"
  >
   <div>
     <el-select
         v-model="props.ComplieRoleData.role"
         multiple
         filterable
         allow-create
         default-first-option
         :reserve-keyword="false"
     >
       <el-option
           v-for="item in options"
           :key="item.id"
           :label="item.name"
           :value="item.name"
       />
     </el-select>
   </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="updataRole">确定</el-button>
        <el-button type="primary" @click="quxiao">
          取消
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {defineProps, onMounted, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import axios from "axios";
import {useRouter} from "vue-router";
const router=useRouter()
const props =defineProps ({
  ComplieRoleData: {
    type: Object,
  },
});

onMounted(()=>{
//查询所有的角色
  axios.get("http://localhost:1688/sysUser/allRole").then((data)=>{
    console.log(data.data)
    options.value =data.data.data
  })



})

const options =ref()

//点击确认触发
const updataRole = ()=>{
  var formData = new FormData();

  if(props.ComplieRoleData.transition==0){
    const url ="http://localhost:1688/sysUser/updateRole"
    const array =JSON.stringify(props.ComplieRoleData.role);
    formData.append("roleNameList",JSON.parse(array))
    formData.append("userId",JSON.stringify(props.ComplieRoleData.userId))

    axios.put(url, formData).then((data)=>{
      const val =data.data.data;
      console.log(val)
      if(val.code==403){
        ElMessage.error(val.context)
      }else {
        console.log(data)
        router.go(0);


      }
    })
    console.log(props.ComplieRoleData,"role")


  }else{
  //formdate 不能用在git 请求
    const url ="http://localhost:1688/sysUser/arrayIdRole"
    const roleNameList =JSON.stringify(props.ComplieRoleData.role);
    console.log(roleNameList,"array")
    formData.append("roleNameList",JSON.parse(roleNameList))

    axios.put(url, formData).then((data)=>{
      console.log(data.data.data)
      const array =data.data.data.join(",")

      axios.put(`http://localhost:1688/position_con/updateDepartmentPosition/${props.ComplieRoleData.depposId}/${array}`)
      .then(ref=>{
        const val =data.data;
        if(val.code==403){
          ElMessage.error("权限不足")
        }else {
          console.log(data)
          router.go(0);
        }

      })
    })
  }
  props.ComplieRoleData.dialogVisible = false
  props.ComplieRoleData.role= [];
}
//点击取消触发
const quxiao =()=>{
  props.ComplieRoleData.dialogVisible = false
  props.ComplieRoleData.role= [];
}
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('是否要取消')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}
</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
